<script>
import {showDataFn,changeDataFn} from '@/api/pro';
import { ElMessage } from 'element-plus'
import ExportJsonExcel from 'js-export-excel'
export default {
    data() {
        return {
            commendList:[],
            currentPage:1
        }
    },
    mounted() {
        showDataFn({
            type:'isrecommend',
            flag:1
        }).then(res=>{
            if(res.code==200){
                console.log(res.message);
                this.commendList=res.data
                console.log(this.commendList);
            }else{
                console.log(res.message);
            }
        })
    },
    computed:{
        tableData(){
            return this.commendList.slice((this.currentPage-1)*5, (this.currentPage-1)*5+5)
        }
    },
    methods: {
        changecommend(row){
            changeDataFn({
                proid:row.proid,
                type:'isrecommend',
                flag:row.isrecommend
            }).then(res=>{
                if(res.code==200){
                    ElMessage.success(res.message)
                }else{
                    ElMessage.error(res.message)
                }
            })
        },
        exportClick(){
            const option ={ fileName:'导出的文件'};

            option.datas=[

                //数据源
                {
                    sheetData: this.commendList,
                    //工作表名称
                    sheetName: "商品列表",
                    //导出的字段
                    sheetFilter: ["img1","proname", "category",'originprice','isrecommend'],
                    //表头名称
                    sheetHeader: ["图片","商品名称", "商品分类","商品价格","是否推荐"],
                    //单元格宽度
                    columnWidths: [40, 40, 40, 40,40],
                }
            ];
            //通过配置的option 创建一个excel文件
            var toExcel = new ExportJsonExcel(option);
            //将文件保存在本地
            toExcel.saveExcel();
        }
    },
}
</script>
<template>
    <h4>文件导出</h4>
    <!--
         方法1 
         使用a标签的href属性直接实现文件的下载 

         方法2
         将内容放在文件中，将文件保存在本地
    -->
    <el-button @click="exportClick">文件导出</el-button>

    <el-table :data="tableData">
    <el-table-column width="100" type="index" label="序号" >
        <template #default={$index}>
            <el-tag> 
               {{(currentPage-1)*5+1+ $index }} 
            </el-tag>
        </template>
    </el-table-column>
    <el-table-column  prop="img" label="图片">
        <template #default={row}>
            <el-image :style="{width:'80px',height:'80px'}" :src="row.img1"> 
            </el-image>
        </template>
    </el-table-column>
    <el-table-column width="280" prop="proname" label="商品名称"></el-table-column>
    <el-table-column prop="category" label="商品分类"></el-table-column>
    <el-table-column prop="originprice" label="商品价格"></el-table-column>
    <el-table-column prop="isrecommend" label="是否推荐">
        <template #default={row}>
            <el-switch
            v-model="row.isrecommend" :active-value="1" :inactive-value="0" @change="changecommend(row)" 
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
        </template>
    </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination  :page-size="5" v-model:current-page="currentPage" background layout="prev, pager, next" :total="commendList.length"  />
</template>